<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../wh2114/vuedemo/lib/vue.js"></script>
    <link rel="stylesheet" href="..wh2114/vuedemo/lib/animate.css" />
    <style></style>
  </head>
  <body>
    <div id="app">
      <h2>{{title}}</h2>
      <myhead></myhead>
      <parent num="1314" age="32" word="求求你们了,daydayup"></parent>
    </div>

    <template id="parent">
      <div>
        <h2>parent = parent - 父组件</h2>
        <h2>{{num}} -- {{age}} -- {{word}}</h2>
        <hr />
        <childone
          v-bind:pro="pro"
          :city="city"
          :area="area"
          :address="address"
        ></childone>
        <hr />
        <childtwo
          :prop-a="1314"
          prop-b="2114-dayadyup"
          :prop-c="flag"
          prop-d="周六好好总结第一周Vue"
        ></childtwo>
      </div>
    </template>

    <template id="childone">
      <div>
        <h2>child-one = 1</h2>
        <h2>地址是 {{pro}}-{{city}}-{{area}}-{{address}}</h2>
      </div>
    </template>
    <template id="childtwo">
      <div>
        <h2>child-two = 2</h2>
        <h2>我的props === {{propA }} - {{propB}} - {{propC}} - {{propD}}</h2>
      </div>
    </template>
    <script>
      Vue.component("myhead", {
        template: "<h2>wh2114 - 天天大声背面试题目 </h2>",
      });
      // 全局注册
      Vue.component("parent", {
        template: "#parent",
        data() {
          return {
            pro: "湖北省",
            city: "武汉市",
            area: "江夏区",
            address: "金融港B18",
            flag: !!1,
          };
        },
        props: ["num", "age", "word"], // 跟data 一样 不能修改
        components: {
          childtwo: {
            template: "#childtwo",
            props: {
              propA: Number,
              propB: String,
              propC: Boolean,
              propD: [String, Number],
            },
          },
        },
      });
      Vue.component("childone", {
        template: "#childone",
        props: {
          pro: String,
          city: {
            type: String,
          },
          area: {
            type: [String, Number],
            default: "null",
          },
          address: {
            type: [String, Function],
            default: "",
          },
        },
      });
      const vm = new Vue({
        data: {
          title: "Vue component 组件传参(props)",
        },
        components: {
          first: {
            template: "<h2>First - vue 组件初始化 </h2>",
          },
        },
        mounted() {
          document.getElementsByTagName("title")[0].innerHTML = this.title;
        },
      }).$mount("#app");
    </script>
    <!-- 
        <A>
            <B></B>
        </A>
        props  组件接受的外部数据  

        通过 Prop 向子组件传递数据  单向数据流   

        props 属性   用来传递(父组件传给子组件)组件的参数 (动态&静态)   v-bind
        props 只能用来传递数据  不可以修改   
        动态props v-bind 
        静态props 没有 v-bind 

        props 驼峰命名   user-name="zuozuomu"

        props 校验  格式类型
        String    
        Number
        Boolean
        Array
        Object
        Date
        Function
        Symbol  符号
     -->
  </body>
</html>
